import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber,TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;

class ApplyModal extends Component {
  constructor(props) {
    super(props); 
  }
  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.props.form.resetFields();       
      }
    });
  };

  render() {
    const { children,assetType,item,title } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const typeTreeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.assetType && d.assetType.length > 0 ? typeTreeData(d.assetType) : [];
        return d;
      })
    }

    return (
        <span>          
            <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                zIndex={30}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
            >
              <Form layout='horizontal' onSubmit={this.okHandler.bind(this)}>
                <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('id',{
                      initialValue: typeof(item.id)=="undefined" ? new Date().getTime() + '' : item.id+'',
                    })(
                      <Input type="hidden"/>
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="资产分类"
                >
                  {
                    getFieldDecorator('typeVo', {
                      initialValue:item.typeVo,
                      rules: [{
                        required: true, message: '请选择资产分类',
                      }]
                    })(
                      <TreeSelect
                        showSearch
                        treeNodeFilterProp="title"
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择资产分类"
                        notFoundContent="无匹配结果"
                        allowClear
                        labelInValue={true}
                        treeDefaultExpandAll
                        treeData={typeTreeData(assetType)}
                      >
                      </TreeSelect>
                    )
                  }
                </FormItem>                       
                <FormItem
                  {...formItemLayout}
                  label="备注"
                  hasFeedback
                >
                  {
                    getFieldDecorator('desc', {
                      initialValue:item.desc,
                      rules: [
                        { type: 'string', max: 200, message: '最多200个字符' }
                      ],
                    })(<Input type="textarea" rows={5} />)
                  }
                </FormItem>                    
              </Form>
            </Modal> 
        </span>
    );
  }
}

export default Form.create()(ApplyModal);